<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>TinyJSX Clock Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=yes" />
    <script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx.min.js"></script>
    <script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx-hooks.min.js"></script>
    <script defer type="text/javascript" src="https://unpkg.com/tiny-jsx@latest/tiny-jsx-dom.min.js"></script>
    <script type="text/javascript">
      document.onreadystatechange = function () {
        if (document.readyState === 'complete') {
          const { createElement } = TinyJSX;
          const { render } = TinyJSXDom;
          const { useEffect, useState } = TinyJSXHooks;

          function Clock() {
            const [tick, setTick] = useState(0);
            useEffect(() => {
              const interval = setInterval(() => {
                setTick(tick + 1);
              }, 1000);
              return () => clearInterval(interval);
            }, [tick]);
            return createElement('div', {}, 'Seconds: ' + tick);
          }

          render(createElement(Clock), document.body);
        }
      }
    </script>
</head>
<body></body>
</html>
